<template>
<div class="zuo">

  <div class="settings-page">
 <van-nav-bar title="设置" left-text="" @click-left="goBack()" left-arrow />
    <div
      class="setting-item"
      v-for="(item, index) in settingsItems"
      :key="index"
    >
      <span class="item-title">{{ item.title }}</span>
      <span v-if="item.type === 'text'" class="item-value">{{ item.value }}</span>
      <span v-if="item.type ==='switch'" class="item-switch">
        <input
          type="checkbox"
          v-model="item.checked"
          @change="handleSwitchChange(item)"
        />
      </span>
      <span v-if="item.type === 'link'" class="item-arrow">></span>
    </div>
  </div>
</div>
</template>

<script>
export default {
  data() {
    return {
     settingsItems: [
        {
          title: "多语言/Language",
          type: "link",
          value: "中文"
        },
        {
          title: "定位功能",
          type: "switch",
          checked: true
        },
        {
          title: "消息通知",
          type: "switch",
          checked: true
        },
        {
          title: "手机剪切板权限",
          type: "switch",
          checked: true
        },
        {
          title: "免密支付设置",
          type: "link"
        },
        {
          title: "服务协议与规则",
          type: "link"
        },
        {
          title: "给我们评价",
          type: "link"
        },
        {
          title: "清除缓存",
          type: "link",
          value: "123MB"
        }
      ]
    };
  },
  methods: {
    handleSwitchChange(item) {
      // 这里可以添加开关切换的业务逻辑
      console.log(`${item.title}的开关状态已改变为${item.checked}`);
    },
     goBack(){
      this.$router.go(-1);
    }
  },
  created() {},
};
</script>

<style scoped>
.zuo {
  text-align: left;
}
.settings-page {
  padding: 20px;
}
.page-title {
  font-size: 20px;
  margin-bottom: 20px;
}
.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #ccc;
}
.item-title {
  font-size: 16px;
}
.item-value {
  font-size: 14px;
  color: #888;
}
.item-switch {
  display: flex;
  align-items: center;
}
.item-arrow {
  font-size: 18px;
  color: #888;
}
</style>
